
    html,body,#box,main{
        height: 100%;
    }
    body{
        background:#c6c6c6;
    }
    main{
        background:#fafafa;
    }
	ul{
		list-style:none;
		padding-left:0px;
		margin-bottom:0px;
	}
    #box{
        width: 100%;
        padding:0.5rem 0.7rem;
    }
    #goods,#saler{
        width:40%;
        border:0.1rem black double;
    }
    #order{
        width:20%;
        border-top: 0.1rem black double;
        border-bottom: 0.1rem black double;
    }
    #goods,#saler, #order{
        height: 100%;
        float: left;
        overflow-y:auto; 
        padding: 0.4rem 0.25rem 0px 0.25rem;
        overflow-y: auto;
        overflow-x: hidden;
    }
    main div.productImg img{
        width:1.5rem;
        height:auto;
    }
    h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin: 0px;
        font-size:0.35rem;
        line-height: 0.3rem;
        letter-spacing: 2px;
    }
    p{
        margin-bottom: 0px;
    }
    /*goods*/
        #logo{
            width: 100%;
            height: auto;
        }
        #goods div.goodsItem{
            display: flex;
            padding: 0.25rem 0px 0.3rem;
            border-top: 2px solid black;
            border-bottom: 2px solid black;
            
        }
        #goods div.goodsItem + div{
            margin-top: 0.1rem;
        }
        #goods div.goodsItem>div:nth-child(2){
            margin-left: 0.15rem;
            position:relative;
            flex:1;
        }
        #goods p.productContent{
            font-size: 0.18rem;
            line-height: 0.25rem;
            margin-bottom:0.05rem;
        }
        #goods p.addToList{
            width:1.45rem;
            height:0.3rem;
            position: relative;
            cursor:pointer;
        }
        #goods p.addToList span{
            width:100%;
            font-size: 0.18rem;
        }
        #goods p.addToList span:first-child{
            position: absolute;
            z-index:1;
            transition: all .15s linear;
        }
        #goods p.addToList span:last-child{
            display:inline-flex;
            position: relative;
            z-index: 2;
			height:100%;
			align-items:center;
			justify-content:center;
            border:2px solid black;
            transition:transform .2s linear;
			transform-origin:left bottom;
			
        }
        #goods p.price{
            position:absolute;
            font-size:0.16rem;
            font-weight: bold;
            top:0.07rem;
            right:0px;
        }
	/*ORDER*/
		#order{
			position:relative;
		}
		#order h3{
			height:0.74rem;
			text-align:center;
		}
		#order ul{
			float:left;
			width:100%;
		}
		#order div:last-child{
			position:absolute;
			top:0.94rem;
			padding:0px 0.25rem;
			width:100%;
			left:0px;
			transition:all .2s linear;
		}
		#order #total{
			display:flex;
			justify-content:space-between;
			height:0.74rem;
			align-items:center;
			border-top:3px solid black;
			border-bottom:3px solid black;
			transition:all .2s linear;
			width:100%;
		}
		#order #total span{
			font-size:0.15rem;
			font-weight:bold;
		}
		#order li.orderItem{
			display:flex;
			float:left;
			width:100%;
			margin-left:-100%;
			justify-content:space-between;
			height:0.74rem;
			align-items:center;
			border-bottom:2px solid black;
            transition:all .2s linear;
            opacity: 1;
		}
		#order #total span{
			font-size:0.15rem;
		}
		#order li.orderItem:hover a{
			display:inline-block;
			width:8px;
			height:16px;
        }
        #order li.orderItem:hover span>b{
            display: inline-block;
        }
        #order li.orderItem span{
            position: relative;
        }
        #order li.orderItem span>b{
            position: absolute;
            display: none;
            cursor: pointer;
        }
        #order li.orderItem span>b:first-child{
            bottom: 100%;
            left:0px;
        }
        #order li.orderItem span>b:last-child{
            top: 100%;
            left:0px;
        }
		#order li.orderItem a{
			display:none;
			position:relative;
			text-decoration:none;
		}
		#order li.orderItem a b:first-child{
			position:absolute;
			z-index:0;
			background:black;
			height:0px;
			width:100%;
			transition:all .1s linear; 
		}
		#order li.orderItem a b:last-child{
			position:relative;
			z-index:2;
			color:black;
			transition:all .05s linear;
			width:100%;
			height:100%;
		}
		#order li.orderItem a:active b:first-child{
			height:100%;
		}
		#order li.orderItem a:active b:last-child{
			color:white;
        }
    /*Saler*/
        #saler h3{
            text-align:center;
            margin-bottom:0.72rem;
        }
        #saler table td{
            border-color:black;
            position: relative;
        }
        #saler table tr:nth-child(1) td{
            width: 33.33333333%;
            height: 0.38rem;
        }
        #saler table tr:nth-child(2) td{
            height: 0.66rem;
        }
        #saler table tr:last-child td{
            text-align: center;
            font-size: 0.18rem;
            font-weight: bold;
        }
        #saler input,
        #saler textarea{
            border-width: 0px;
            background:none;
            outline: none;
            width:100%;
            height: 100%;
            position: absolute;
            top:0px;
            left:0px;
            padding-left: 8px;
        }
        #saler ul{
            list-style: none;
            width: 100%;
            height: 0.5rem;
            position: absolute;
            right:15px;
            bottom:15px;
            border-radius: 8px;
            box-shadow: 0 0 15px #c5c3c3;
			padding:5px 0px;
			background: white;
			display:none;
        }
        #saler li{
            display: flex;
            align-items: center;
            height: 50%;
            padding-left:0.5rem;
            position: relative;
        }
		#saler li:hover{
			background:blue;
			color:white;
        }
        #saler li span{
            position: absolute;
            left:0.3rem;
            top: 50%;
            transform: translate(0%,-50%);
        }

       